<div>
    <h2 mat-dialog-title>Publisher properties</h2>
    <mat-dialog-content>
        <mat-checkbox (click)="toggleAudio()" [checked]="publisherProperties.audioSource !== false">Audio
        </mat-checkbox>
        <mat-checkbox (click)="toggleVideo()" [checked]="publisherProperties.videoSource !== false">Video
        </mat-checkbox>
        <mat-checkbox [(ngModel)]="publisherProperties.publishAudio" (click)="publisherProperties.publishAudio = !publisherProperties.publishAudio">Publish audio</mat-checkbox>
        <mat-checkbox [(ngModel)]="publisherProperties.publishVideo" (click)="publisherProperties.publishVideo = !publisherProperties.publishVideo">Publish video</mat-checkbox>
        <mat-checkbox [(ngModel)]="publisherProperties.mirror" (click)="publisherProperties.mirror = !publisherProperties.mirror">Mirror</mat-checkbox>
        <mat-checkbox [(ngModel)]="publisherProperties.videoSimulcast" (click)="publisherProperties.videoSimulcast = !publisherProperties.videoSimulcast">Video Simulcast</mat-checkbox>
        <mat-divider></mat-divider>
        <mat-form-field>
            <input matInput placeholder="Audio source" [(ngModel)]="audioSource" [disabled]="(publisherProperties.audioSource === false)">
        </mat-form-field>
        <button mat-icon-button class="device-btn" title="List audio devices" (click)="listAudioDevices()">
            <mat-icon aria-label="List audio devices">add_circle</mat-icon>
        </button>
        <button *ngIf="audioDevices.length > 0" mat-icon-button class="device-btn" title="Clear audio devices" (click)="audioDevices = []">
            <mat-icon aria-label="Clear audio devices">clear</mat-icon>
        </button>
        <mat-chip-list *ngIf="audioDevices.length > 0">
            <mat-chip *ngFor="let audioDevice of audioDevices" (click)="audioSource=audioDevice.deviceId">{{audioDevice.label}}</mat-chip>
        </mat-chip-list>
        <mat-form-field>
            <input matInput placeholder="Video source" [(ngModel)]="videoSource" [disabled]="(publisherProperties.videoSource === false)">
        </mat-form-field>
        <button mat-icon-button class="device-btn" title="List video devices" (click)="listVideoDevices()">
            <mat-icon aria-label="List video devices">add_circle</mat-icon>
        </button>
        <button *ngIf="videoDevices.length > 0" mat-icon-button class="device-btn" title="Clear video devices" (click)="videoDevices = []">
            <mat-icon aria-label="Clear video devices">clear</mat-icon>
        </button>
        <mat-chip-list *ngIf="videoDevices.length > 0">
            <mat-chip *ngFor="let videoDevice of videoDevices" (click)="videoSource=videoDevice.deviceId">{{videoDevice.label}}</mat-chip>
        </mat-chip-list>
        <mat-divider></mat-divider>
        <mat-form-field>
            <input matInput id="resolution-input" placeholder="Resolution" [(ngModel)]="publisherProperties.resolution">
        </mat-form-field>
        <mat-form-field>
            <input matInput id="framerate-input" placeholder="Framerate" [(ngModel)]="publisherProperties.frameRate" type="number">
        </mat-form-field>
        <mat-divider></mat-divider>
        <mat-form-field>
            <input matInput id="filter-type-input" placeholder="Filter type" [(ngModel)]="filter.type" type="text">
        </mat-form-field>
        <mat-form-field>
            <input matInput id="filter-options-input" placeholder="Filter options" [(ngModel)]="stringOptions" type="text">
        </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
        <button id="close-btn" mat-button [mat-dialog-close]="initValue">CANCEL</button>
        <button id="save-btn" mat-button [mat-dialog-close]="setCloseValue()">SAVE</button>
    </mat-dialog-actions>
</div>
